<template>
  <div class="chart">
    <div class="title">各评级逾期订单占各评级总成交订单量的百分比</div>
    <div
      :id="`bar${day}`"
      class="bar"
    />
  </div>
</template>

<script setup>
import { onMounted,watch } from 'vue'
import { initBarEcharts } from './hook.js'
const props = defineProps({
  option: {
    type: Object,
    default: () => ({}),
  },
  day: Number,
  Data: Array,
})
const dataarr = [];
watch(
  () => props.Data,
  (newValue, oldValue) => {
    createchart();

  }
);
onMounted(() => {
  createchart();
  // initBarEcharts(bar30, list, '#14CFF8')
  // initBarEcharts(bar90, list, '#2878FF')
})
const createchart = ()=>{
  const dom = document.querySelector(`#bar${props.day}`)
  if(props.Data){
    props.Data.forEach(element => {
      dataarr.push(element.OverdueRate);
});
initBarEcharts(dom, dataarr, '#10D7BF')

  }
}
</script>

<style lang="scss" scoped>
.chart {
  margin-top: 60px;
  text-align: center;
  font-size: 16px;
  color: #2d2d2d;
  font-weight: 600;
  .bar {
    height: 330px;
  }
}
</style>
